<template>
    <div class="right2Child1">
        <div class="child-content-title">
            <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
            患者病症占比
        </div>
        <div id="right1ChildIllness"></div>
    </div>
</template>

<script lang="ts">
import { echartLoad, highchartLoad } from "@/utils";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";

@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    async mounted() {
        this.setPageData();
    }

    setPageData() {
        if (!this.pageData || !this.pageData[0]) return;
        highchartLoad(() => {
            this.$nextTick(() => {
                this.iniChart();
            });
        });
    }
    iniChart() {
        window.Highcharts.setOptions({
            lang: { locale: "zh-CN" },
        });
        window.Highcharts.chart("right1ChildIllness", {
            locale: "zh-CN",
            // 图表配置
            chart: {
                type: "pie",
                backgroundColor: "transparent", // 主背景透明
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0,
                    depth: 50,
                    viewDistance: 25,
                },
            },

            // 标题配置
            title: {
                text: "",
                style: {
                    fontSize: "18px",
                    fontWeight: "bold",
                },
            },

            // 图例配置
            legend: {
                align: "right",
                verticalAlign: "middle",
                //labelFormat: "{name}: {y}%",
                layout: "vertical",
                itemStyle: {
                    color: "#fff",
                },
                itemHoverStyle: {
                    color: "#fff", // 悬停时字体颜色
                },
                labelFormatter: function () {
                    const _this: any = this;
                    console.info(_this);
                    return `<span>${_this.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: ${_this.color};font-size:16px;font-weight:bold;">${_this.y}%</span>`;
                },
            },

            // 提示框配置
            tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
            },

            // 绘图区域配置
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: "pointer",
                    depth: 35,
                    dataLabels: {
                        enabled: false, //隐藏图像上的文字
                        format: "{point.name}: {point.percentage:.1f}%",
                        distance: -30,
                    },
                    showInLegend: true,
                    slicedOffset: 10,
                    states: {
                        hover: {
                            brightness: 0.1,
                        },
                    },
                },
            },

            // 数据系列
            series: [
                {
                    name: "科室占比",
                    colorByPoint: true,
                    data: this.pageData.map((item) => ({
                        name: item.departmentName === "-" ? "其他" : item.departmentName,
                        y: item.count,
                    })),
                },
            ],

            // 移除版权信息
            credits: {
                enabled: false,
            },
        });
    }
}
</script>
<style lang="scss">
.right2Child1 {
    #right1ChildIllness {
        width: 100%;
        height: 200px;
    }
}
</style>
